<template>
    <div>
        <div class="swipercon">
            <div class="swipercon-header">
                <router-link to=""><span class="swipercon-left">进口优选&nbsp;&nbsp;<i>全球推荐</i></span><span class="swipercon-right">查看更多</span></router-link>
            </div>
        <div class="bigbox">
            <div class="swiper-box" style="height: 300px">
                <!-- swiper1 -->
                <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                    <swiper-slide class="slide-1"></swiper-slide>
                    <swiper-slide class="slide-2"></swiper-slide>
                    <swiper-slide class="slide-3"></swiper-slide>
                    <swiper-slide class="slide-4"></swiper-slide>
                    <swiper-slide class="slide-5"></swiper-slide>
                    <swiper-slide class="slide-6"></swiper-slide>
                    <swiper-slide class="slide-7"></swiper-slide>
                    <swiper-slide class="slide-8"></swiper-slide>
                    <!-- <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div> -->
                </swiper>
                <!-- swiper2 Thumbs -->
                <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
                    <swiper-slide class="slide-1"></swiper-slide>
                    <swiper-slide class="slide-2"></swiper-slide>
                    <swiper-slide class="slide-3"></swiper-slide>
                    <swiper-slide class="slide-4"></swiper-slide>
                    <swiper-slide class="slide-5"></swiper-slide>
                    <swiper-slide class="slide-6"></swiper-slide>
                    <swiper-slide class="slide-7"></swiper-slide>
                    <swiper-slide class="slide-8"></swiper-slide>
                </swiper>
            </div>
        </div>
        </div> 
        <router-view></router-view>      
    </div>
</template>
<style scoped lang="less">
*{
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
}
/* ---------------------轮播-------------------------------- */
.swipercon{
    height: 320px;
    width: 100%;
    background:url('../../assets/images/swiper/swiper_bg.jpg')center no-repeat;
    background-size: cover;
}
.swipercon-header{
    height: 40px;
    overflow: hidden;
    line-height: 40px;
    padding: 0px 10px;
}
.swipercon-header span{
    color: white;
    font-size: 20px;
}
.swipercon-header i{
    font-size: 12px;
}
.swipercon-header .swipercon-left{
    float: left;
}
.swipercon-header .swipercon-right{
    float: right;
    font-size: 12px;
}
.swiper-container{

    margin: 0px auto; 

}
.bigbox{
    width: 90%;
    margin: 0px auto;
}
.swiper-container {
    // padding: 20px;
  }
  .swiper-slide {
    background-size: 80% 100%;
    background-position: center;
    background-repeat: no-repeat;
    &.slide-1 {
      background-image:url('../../assets/images/swiper/swiper1.jpg');
    }
    &.slide-2 {
      background-image:url('../../assets/images/swiper/swiper2.jpg');
    }
    &.slide-3 {
      background-image:url('../../assets/images/swiper/swiper3.jpg');
    }
    &.slide-4 {
      background-image:url('../../assets/images/swiper/swiper4.jpg');
    }
    &.slide-5 {
      background-image:url('../../assets/images/swiper/swiper5.jpg');
    }
    &.slide-6 {
      background-image:url('../../assets/images/swiper/swiper6.jpg');
    }
    &.slide-7 {
      background-image:url('../../assets/images/swiper/swiper7.jpg');
    }
    &.slide-8 {
      background-image:url('../../assets/images/swiper/swiper8.jpg');
    }
  }
  .gallery-top {
    height: 70%!important;
    width: 100%;
  }
  .gallery-thumbs {
    height: 20%!important;
    box-sizing: border-box;
    padding: 10px 0;
  }
  .gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }


</style>
<script>
export default{
  // components: {
  //     swiper,
  //     swiperSlide
  //   },
    name: "carrousel",
    data(){
        return{
            swiperOptionTop: {
            spaceBetween: 10,
            navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
            } ,
                       
        },
            swiperOptionThumbs: {
            spaceBetween: 10,
            centeredSlides: true,
            slidesPerView: "auto",
            touchRatio: 0.2,
            slideToClickedSlide: true
        },
            // autoplay:{
            // delay:500,
            // disableOnInteraction:false
            // },
            loop:true
    };
},
            computed: {
              swiper() {
                return this.$refs.mySwiper.$swiper;
              }
            },
              mounted(){
              // var _this=this;
              this.$nextTick(() => {
              const swiperTop = this.$refs.swiperTop.swiper
              const swiperThumbs = this.$refs.swiperThumbs.swiper
              swiperTop.controller.control = swiperThumbs
              swiperThumbs.controller.control = swiperTop
            })    
              
              // this.swiper.slideTo(0, 0, false);

    } 
}

</script>
